<html>
  <head>
    <title> </title>

    
  </head>
  
  
  <body>

    <svg width = "100%" height = "100%" version="1.1" xmlns="http://www.w3.org/2000/svg">

      <rect x = "200" y = "200" width="162" height="100" fill = "green"
	    stroke = "black" rx = "10" ry = "10" 
	    style="stroke-width:12;"/>

      <rect width="180" height="20"
	    style="fill:rgb(0,0,255); 
		   stroke-width:1;
		   stroke:rgb(0,0,0);
		   fill-opacity:0.5;
		   stroke-opacity:0.9"/>
    
      <rect width="20" height = "200" style="fill:rgb(255,0,0);opacity:.8" />
      
      <rect x = "100" y = "20" width="60" height = "60" rx="16" ry ="10"
	    style="opacity:.8" fill="orange"
	    />

      <circle cx = "100" cy = "100" r="50" fill = "yellow" 
	      stroke = "black"
	      /> 
      <line x1="100" y1 = "100" x2="200" y2="110" stroke = "green" />
      
      <polygon points = "200,100 200,200 300,200" fill = "green" stroke = "black" opacity = "0.5" /> 

      <polyline points = "1,1 400,1 350,400 200,200" stroke = "red" opacity = ".2" fill = "none" style = "stroke-width:5"/>
      
      <text style = "font-size:7" x = "30" y = "100"> Hi there, hope you're doing fine </text>  

      <defs>
	<filter id="myShaddow" x="0" y="0">
	  <feGaussianBlur stdDeviation="5"/>
	  <feOffset dx="5" dy="5"/>
	</filter>
      </defs>
    
      <rect x = "50" y = "300" width="50" height="50" fill="grey" filter="url(#myShaddow)"/> 
      <rect  x = "50" y = "300" width="50" height="50" fill="green" stroke="black"/>  



      <script type = "txt/javascript">
	function circle_clicked() {
	alert("click!!");
	}
      </script>

      <circle cx= "400" cy = "300" r = "40" fill = "red" stroke = "#000000" onclick = "circle_clicked(evt)" />  


    </svg>
    
  </body>
  
</html>
